<template>
  <div class="course">
    <Nav backTitle="我的课程" />

    <SelectStudent
      :dataList="studentList"
      :currentSelect="currentStudent"
      @changeSelect="changeStudent"
    ></SelectStudent>

    <ul
      v-if="courseList.length"
      class="course-list"
    >
      <li
        v-for="(item,index) in courseList"
        @click="goCourseDetail(item)"
        :key="index"
      >
        <course-item
          text="亲暂时还没有报读信息哦"
          type="mineCourse"
          :hasAddress="true"
          :item="item"
        />
      </li>
    </ul>
    <empty v-show="showEmpty" />
  </div>
</template>

<script>
import api from 'util/xhr'
import Nav from 'components/nav/nav.vue'
import global from 'util/global'
import CourseItem from 'components/course/item.vue'
import SelectStudent from 'components/select/select.vue'
import drag from 'components/drag/drag'
import 'components/drag/drag.css'
import Empty from 'components/empty.vue'
import { mapState, mapActions } from 'vuex'
import conf from 'conf/index'

export default {
  name: 'course',
  components: {
    Nav,
    CourseItem,
    Empty,
    SelectStudent
  },
  data() {
    return {
      courseList: [],
      pageNo: 1,
      pageSize: 10,
      hasNext: true,
      showStudents: false,
      showName: '',
      showId: '',
      showEmpty: false,
      isShowCard: false
    }
  },
  watch: {},
  created() {
    if (this.studentList.length > 0) {
      this.course()
    } else {
      this.loadStudent().then(() => {
        if (this.studentList.length === 0) {
          this.showEmpty = true
          this.$alert({ content: '目前没有学员，请增加学员' })
        } else {
          this.course()
        }
      })
    }
  },
  computed: {
    ...mapState({
      studentList: state => {
        return state.studentList
      },
      currentStudent: state => {
        return state.currentStudent
      }
    })
  },
  mounted() {},
  beforeDestroy() {
    let courseDom = document.querySelector('.course-list')
    if (courseDom) {
      this.dragObj.unload()
    }
  },
  methods: {
    ...mapActions({
      loadStudent: 'loadStudent'
    }),
    goCourseDetail(classObj) {
      window.location.href = `${conf.netSignUp}/course/2_${
        classObj.classId
      }?bizScene=CoachClass`
    },
    changeStudent(studentObj) {
      let studentId = studentObj.studentId
      this.courseList = []
      this.pageNo = 1
      this.showId = studentId
      this.showName = studentObj.studentName
      this.course()
    },
    resetCondit() {
      this.pageNo = 1
      this.pageSize = 10
    },
    more() {
      this.pageNo++
      this.course('more')
    },
    course(type) {
      this.$loading()
      return api
        .post('/api/m/u/findOuterCourseClass', {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          studentId: this.currentStudent.studentId
        })
        .then(
          data => {
            this.$hideloading()
            if (this.pageNo == 1) {
              this.hasNext = true
            }
            this.courseList = this.courseList.concat(data)
            this.showEmpty = !this.courseList.length
            if (!data.length) {
              this.hasNext = false
              this.$toast({ content: '没有更多咯' })
            }
            this.$nextTick(() => {
              let courseDom = document.querySelector('.course-list')
              if (courseDom && type !== 'more') {
                this.dragObj = new drag({
                  dom: courseDom,
                  upCallback: () => {
                    this.more()
                  }
                })
              }
            })
          },
          desc => {
            this.$hideloading()
            this.$alert({ content: desc })
          }
        )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.course {
  background: #f8f8f8;
  height: 100%;
  padding-top: 110px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.selectStudent {
  width: 100%;
  height: 96px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
.selectTxt {
  font-size: 28px;
}

.course .course-list {
  padding-top: 20px;
  flex: 1;
  overflow-y: auto;
  li {
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    font-size: 0;
  }
  li + li {
    margin-top: 20px;
  }
}
</style>
